<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>订单与购物车 - 校园二手市场</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Noto Serif SC", "Source Han Serif SC", "SimSun", "Times New Roman", serif;
        }

        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        /* 顶部导航栏样式 */
        .header {
            background-color: #2c3e50;
            color: white;
            padding: 25px 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo h1 {
            font-size: 3rem;
            display: flex;
            align-items: center;
            font-weight: 700;
            min-width: 400px;
            letter-spacing: 2px;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
        }

        .logo i {
            margin-right: 15px;
            font-size: 1.8rem;
        }

        .logo i.fa-recycle {
            font-size: 3rem;
            margin-right: 15px;
            vertical-align: middle;
            color: #e74c3c;
        }

        .search-bar {
            flex-grow: 1;
            margin: 0 30px;
        }

        .search-bar form {
            display: flex;
            max-width: 600px;
            margin: 0 auto;
        }

        .search-bar input {
            flex-grow: 1;
            padding: 12px 20px;
            border: none;
            border-radius: 6px 0 0 6px;
            font-size: 16px;
        }

        .search-bar button {
            background-color: #e74c3c;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 0 6px 6px 0;
            cursor: pointer;
            font-size: 16px;
        }

        .search-bar a {
            margin-left: 10px;
            color: #666;
            text-decoration: none;
        }

        .search-bar a:hover {
            text-decoration: underline;
        }

        .user-menu ul {
            display: flex;
            list-style: none;
        }

        .user-menu li {
            margin-left: 25px;
            min-width: 100px;
        }

        .user-menu a {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: 500;
            transition: color 0.3s;
            padding: 8px 0;
        }

        .error-message {
            color: #e74c3c;
            text-align: center;
            margin: 30px 0;
            font-size: 1.1rem;
            padding: 15px;
            background-color: rgba(231, 76, 60, 0.1);
            border-radius: 8px;
            border-left: 5px solid #e74c3c;
        }

        .success-message {
            color: #27ae60;
            text-align: center;
            margin: 30px 0;
            font-size: 1.1rem;
            padding: 15px;
            background-color: rgba(39, 174, 96, 0.1);
            border-radius: 8px;
            border-left: 5px solid #27ae60;
        }

        .sort-options {
            display: flex;
            align-items: center;
        }

        .sort-label {
            margin-right: 8px;
            font-weight: 500;
            color: #2c3e50;
            white-space: nowrap;
        }

        .sort-select {
            padding: 8px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: white;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;
            color: #2c3e50;
            min-width: 50px;
        }

        /* 订单详情专用样式 - 不影响订单列表 */
        .order-detail {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
            padding: 25px;
            margin-bottom: 30px;
        }

        .detail-section {
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #f0f0f0;
        }

        .detail-section:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .detail-section h3 {
            color: #2c3e50;
            font-size: 1.5rem;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e74c3c;
            display: inline-block;
        }

        .detail-row {
            display: flex;
            margin-bottom: 15px;
            align-items: flex-start;
        }

        .detail-label {
            width: 120px;
            color: #7f8c8d;
            font-weight: 600;
            flex-shrink: 0;
        }

        .detail-value {
            flex: 1;
            color: #333;
            font-size: 1.05rem;
            line-height: 1.6;
        }

        .detail-value .order-status {
            padding: 5px 12px;
            border-radius: 4px;
            font-size: 0.9rem;
            font-weight: bold;
            display: inline-block;
        }

        .status-cancelled {
            background: #f8d7da;
            color: #721c24;
        }

        .address-box {
            background: #f9f9f9;
            padding: 15px;
            border-radius: 6px;
            border-left: 4px solid #e74c3c;
        }

        .address-box p {
            margin-bottom: 8px;
        }

        .address-box p:last-child {
            margin-bottom: 0;
        }

        /* 商品信息卡片 */
        .detail-product-card {
            background: #fafafa;
            border-radius: 8px;
            padding: 20px;
            margin-top: 15px;
            border: 1px solid #eee;
        }

        .detail-product-item {
            display: flex;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px dashed #e0e0e0;
        }

        .detail-product-item:last-child {
            border-bottom: none;
        }

        .detail-product-image {
            width: 160px;
            height: 160px;
            border-radius: 6px;
            overflow: hidden;
            margin-right: 30px;
            flex-shrink: 0;
        }

        .detail-product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .detail-status-order {
            display: inline-block;
            border-radius: 10px;
            padding: 5px;
            font-size: 18px;
            font-weight: 600;
            text-align: center;
            min-width: 80px;
            color: #856404;
            border: 1px solid #FFEEBA;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .detail-product-info {
            flex: 1;
        }

        .detail-product-title {
            font-size: 1.2rem;
            color: #2c3e50;
            margin-bottom: 8px;
            font-weight: 600;
        }

        .detail-product-meta {
            color: #7f8c8d;
            margin-bottom: 5px;
            font-size: 0.95rem;
        }

        .detail-product-price {
            font-size: 1.3rem;
            color: #e74c3c;
            font-weight: bold;
            margin-top: 10px;
        }

        .detail-total span {
            color: #e74c3c;
            margin-left: 10px;
        }

        .user-menu i {
            margin-right: 8px;
            font-size: 1.2rem;
        }

        /* 主要内容区 */
        .main-content {
            padding: 30px 0;
            display: flex;
            flex-wrap: wrap;
        }

        /* 侧边栏导航 */
        .sidebar {
            width: 280px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            margin-right: 20px;
            padding: 20px 0;
        }

        .sidebar-menu {
            list-style: none;
        }

        .sidebar-menu li {
            border-bottom: 1px solid #eee;
        }

        .sidebar-menu li:last-child {
            border-bottom: none;
        }

        .sidebar-menu a {
            display: block;
            padding: 18px 30px;
            color: #555;
            transition: all 0.3s;
            font-size: 16px;
        }

        .sidebar-menu a:hover {
            background: #f9f9f9;
            color: #e74c3c;
            padding-left: 35px;
        }

        .sidebar-menu a.active {
            background: #f1f1f1;
            color: #e74c3c;
            border-left: 4px solid #e74c3c;
        }

        .sidebar-menu i {
            width: 30px;
            text-align: center;
            margin-right: 10px;
            font-size: 18px;
        }

        /* 内容区域 */
        .content {
            flex: 1;
            min-width: 0;
            margin-left: 0;
            min-height: 700px;
            width: calc(100% - 300px);
        }

        .content-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .content-header h2 {
            color: #2c3e50;
            font-size: 24px;
        }

        /* 订单卡片 */
        .order-card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
            overflow: hidden;
            width: 100%;
            padding: 0 15px;
        }

        .order-header {
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            position: relative;
            justify-content: space-between;
            align-items: center;
        }

        .order-id {
            font-weight: bold;
            color: #2c3e50;
            font-size: 16px;
        }

        .order-status {
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 14px;
            font-weight: bold;
        }

        .status-cancelled {
            background: #f8d7da;
            color: #721c24;
            padding: 10px;
            border: #95a5a6;
            border-radius: 5px;
        }

        .order-date {
            color: #7f8c8d;
            font-size: 14px;
        }

        .order-body {
            padding: 20px;
        }

        .order-item {
            display: flex;
            padding-top: 0;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
            align-items: flex-start;
        }

        /* 删除菜单 */
        .order-actions-menu {
            position: relative;
            display: inline-block;
            float: right;
        }

        /* 时钟 */
        .countdown {
            color: #e74c3c;
            font-weight: bold;
            font-size: 14px;
            margin-left: 15px;
            padding: 5px 10px;
            background: #f8d7da;
            border-radius: 4px;
            display: inline-block;
        }

        .time-remaining {
            font-family: monospace;
        }

        .menu-dots {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #666;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s;
        }

        .menu-dots:hover {
            background-color: #f0f0f0;
        }

        /* 下拉菜单内容 */
        .menu-content {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            background-color: white;
            min-width: 120px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 100;
            border-radius: 6px;
            border: 1px solid #eee;
        }

        .menu-content a {
            color: #333;
            padding: 10px 15px;
            text-decoration: none;
            display: block;
            font-size: 14px;
            transition: all 0.2s;
        }

        .menu-content a:hover {
            background-color: #f5f5f5;
            color: #e74c3c;
        }

        .menu-content a i {
            margin-right: 8px;
            width: 18px;
            text-align: center;
        }

        .order-actions-menu:hover .menu-content {
            display: block;
            animation: fadeIn 0.2s;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .item-image {
            width: 200px;
            height: 200px;
            border-radius: 10px;
            overflow: hidden;
            margin-right: 30px;
            margin-bottom: 10px;
            flex-shrink: 0;
        }

        .item-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .item-details {
            flex: 1;
            margin-left: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 130px;
        }

        .item-title {
            font-weight: bold;
            color: #2c3e50;
            font-size: 17px;
            padding-bottom: 20px;
        }

        .item-description {
            color: #666;
            font-size: 14px;
            line-height: 1.5;
            margin-bottom: 10px;
            /* 多行文本溢出显示省略号 */
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3; /* 显示的行数 */
            overflow: hidden;
            text-overflow: ellipsis;

            /* 确保高度不超过两行文本 */
            min-height: 70px; /* 14px * 1.5 * 2行 */
            max-height: 70px;
        }


        .item-seller {
            color: #7f8c8d;
            font-size: 14px;
            padding-bottom: 5px;
        }

        .item-sellerPhone {
            color: #7f8c8d;
            font-size: 14px;
            padding-bottom: 5px;
        }

        .item-conditionLevel {
            color: #7f8c8d;
            font-size: 14px;
            padding-bottom: 5px;
        }

        .item-price {
            font-weight: bold;
            color: #e74c3c;
            font-size: 20px;
            padding-top: 10px;
        }

        .order-footer {
            padding-top: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 10px;
        }

        .order-total {
            font-size: 20px;
            font-weight: bold;
        }

        .order-total span {
            color: #e74c3c;
            font-size: 20px;
        }

        .order-actions {
            display: flex;
            gap: 12px;
        }

        .btn {
            padding: 10px 20px;
            border-radius: 4px;
            font-size: 15px;
            cursor: pointer;
            border: none;
            transition: all 0.3s;
        }

        .btn-primary {
            background: #e74c3c;
            color: white;
        }

        .btn-primary:hover {
            background: #c0392b;
        }

        .btn-outline {
            background: transparent;
            border: 1px solid #ddd;
            color: #555;
        }

        .btn-outline:hover {
            background: #f5f5f5;
        }

        /* edit*/
        .btn-edit {
            max-width: 120px;
            margin-left: 72%;
        }

        /* 支付模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            overflow: auto;
        }

        .modal-content {
            background-color: #fff;
            margin: 15% auto;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            width: 500px;
            max-width: 90%;
            position: relative;
            animation: modalopen 0.3s;
        }

        @keyframes modalopen {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .close-modal {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.3s;
        }

        .close-modal:hover,
        .close-modal:focus {
            color: #333;
            text-decoration: none;
        }

        .payment-tabs {
            display: flex;
            margin-top: 15px;
            border-bottom: 1px solid #ddd;
        }

        .tab-btn {
            padding: 10px 20px;
            background: #f1f1f1;
            border: none;
            cursor: pointer;
            font-size: 16px;
            flex: 1;
            text-align: center;
            transition: all 0.3s;
        }

        .tab-btn:hover {
            background: #e0e0e0;
        }

        .tab-btn.active {
            background: #4CAF50;
            color: white;
        }

        .payment-tab-content {
            display: none;
            padding: 20px 0;
            text-align: center;
        }

        #wechatTab {
            display: block;
        }

        .payment-instructions {
            margin-bottom: 20px;
            color: #555;
            font-size: 14px;
        }

        .qr-code {
            margin: 20px auto;
            width: 250px;
            height: 250px;
            background: #f9f9f9;
            border-radius: 8px;
            border: 1px solid #eee;
            overflow: hidden;
        }

        .qr-code img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .payment-success {
            display: none;
            background: #4CAF50;
            color: white;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
            text-align: center;
        }

        .payment-success i {
            margin-right: 10px;
        }

        .modal .btn {
            padding: 10px 20px;
            border-radius: 4px;
            font-size: 15px;
            cursor: pointer;
            border: none;
            transition: all 0.3s;
            width: 100%;
        }

        .modal .btn-primary {
            background: #4CAF50;
            color: white;
        }

        .modal .btn-primary:hover {
            background: #3e8e41;
        }

        /* 购物车相关样式 */

        .cart-item-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .summary-total span {
            color: #e74c3c;
        }


        .cart-item-checkbox input[type="checkbox"] {
            width: 16px;
            height: 16px;
            margin-right: 8px;
            cursor: pointer;
        }

        /* 空状态样式 */
        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center; /* 水平居中 */
            justify-content: center; /* 垂直居中 */
            text-align: center;
            padding: 50px 0;
            background: #fff;
            min-height: 700px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .empty-icon {
            font-size: 60px;
            color: #bdc3c7;
            margin-bottom: 20px;
        }

        .empty-text {
            color: #7f8c8d;
            margin-bottom: 25px;
            font-size: 18px;
        }


        .summary-total span {
            color: #e74c3c;
            font-size: 1.3rem;
        }

        .empty-cart {
            display: flex;
            flex-direction: column;
            align-items: center; /* 水平居中 */
            justify-content: center; /* 垂直居中 */
            text-align: center;
            min-height: 700px;
            height: 100%; /* 确保占满父容器高度 */
            width: 100%; /* 确保占满父容器宽度 */
            padding: 20px;
            box-sizing: border-box;
        }

        .empty-cart-icon {
            font-size: 3rem;
            color: #bdc3c7;
        }

        .empty-cart-text {
            font-size: 1.2rem;
            color: #7f8c8d;
            margin-bottom: 20px;
        }

        /* 页脚 */
        .footer {
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 40px 0 20px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }

        .footer-section h3 {
            color: white;
            margin-bottom: 15px;
            font-size: 1.2rem;
        }

        .footer-section p {
            margin-bottom: 10px;
        }

        .footer-section ul {
            list-style: none;
        }

        .footer-section li {
            margin-bottom: 8px;
        }

        .footer-section a:hover {
            color: #e74c3c;
        }

        .footer-section i {
            margin-right: 8px;
            width: 20px;
            text-align: center;
        }

        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid #34495e;
            font-size: 0.9rem;
            color: #bdc3c7;
        }

        /* 响应式设计 */
        @media (max-width: 1300px) {
            .btn-edit {
                margin-left: 60%;
            }
        }

        @media (max-width: 768px) {
            .btn-edit {
                margin-left: 50%;
            }
        }

        @media (max-width: 1200px) {
            .sidebar {
                width: 260px;
            }

            .content {
                width: calc(100% - 280px);
            }
        }

        @media (max-width: 992px) {
            .main-content {
                flex-direction: column;
            }

            .sidebar, .content {
                width: 100%;
                margin-right: 0;
            }
        }

        @media (max-width: 768px) {
            .header .container {
                flex-direction: column;
            }

            .logo, .search-bar, .user-menu {
                width: 100%;
                margin-bottom: 15px;
            }

            .user-menu ul {
                justify-content: center;
            }

            .user-menu li {
                margin: 0 10px;
            }

            .order-item {
                flex-direction: column;
            }

            .item-image {
                margin-right: 0;
                margin-bottom: 15px;
            }

            .item-details {
                height: auto;
                gap: 10px;
            }

            .order-actions {
                flex-direction: column;
                width: 100%;
                gap: 8px;
            }

            .btn {
                width: 100%;
                margin-bottom: 8px;
            }
        }
    </style>
</head>
<body>
<!-- 顶部导航栏 -->
<header class="header">
    <div class="container">
        <div class="logo">
            <a href="${pageContext.request.contextPath}/home"><h1><i class="fas fa-recycle"></i> 校园二手市场</h1></a>
        </div>
        <div class="search-bar">
            <form th:action="@{${action == 'cart' ? '/orderCar' : '/showAllOrder'}}" method="get">
                <input type="text" name="searchKeyword" th:value="${searchKeyword}" placeholder="搜索订单/商品...">
                <input type="hidden" name="sort" th:value="${sort}">
                <input type="hidden" name="page" th:value="1">
                <button type="submit">搜索</button>
            </form>
        </div>
        <nav class="user-menu">
            <ul>
                <li>
                    <c:if test="${not empty user}">
                        <a href="${pageContext.request.contextPath}/userCenter"><i
                                class="fas fa-user"></i>&nbsp;${user.username}</a>
                    </c:if>
                </li>
                <li><a href="${pageContext.request.contextPath}/productUpload"><i class="fas fa-plus-circle"></i>
                    发布商品</a></li>
            </ul>
        </nav>
    </div>
</header>

<c:if test="${not empty orderError}">
    <div class="error-message">${orderError}</div>
</c:if>

<c:if test="${not empty orderSuccess}">
    <div class="success-message">${orderSuccess}</div>
</c:if>

<c:if test="${not empty orderEditError}">
    <div class="error-message">${orderEditError}</div>
</c:if>

<c:if test="${not empty orderEditSuccess}">
    <div class="success-message">${orderEditSuccess}</div>
</c:if>

<c:if test="${not empty carItemError}">
    <div class="error-message">${carItemError}</div>
</c:if>

<c:if test="${not empty carItemSuccess}">
    <div class="success-message">${carItemSuccess}</div>
</c:if>

<!-- 主要内容区 -->
<main class="main-content container">
    <!-- 侧边栏导航 -->
    <aside class="sidebar">
        <ul class="sidebar-menu">
            <li><a href="${pageContext.request.contextPath}/showAllOrder"><i class="fas fa-list-alt"></i> 我的订单</a></li>
            <li><a href="${pageContext.request.contextPath}/orderCar"><i class="fas fa-shopping-cart"></i> 购物车</a></li>
            <li><a href="${pageContext.request.contextPath}/productCenter"><i class="fas fa-box-open"></i> 我的商品</a></li>
            <li><a href="${pageContext.request.contextPath}/userCenter"><i class="fas fa-user"></i> 个人中心</a></li>
            <li><a href="${pageContext.request.contextPath}/home"><i class="fas fa-home"></i> 返回主页</a></li>
        </ul>
    </aside>

    <!-- 内容区域 -->
    <div class="content">
        <c:choose>
            <c:when test="${not empty param.action && param.action == 'detail'}">
                <div class="content-header">
                    <h2>订单详情</h2>
                    <c:choose>
                        <%-- 如果是从确认订单页面过来的 --%>
                        <c:when test="${fn:contains(header['referer'], 'confirmOrder')}">
                            <a href="${pageContext.request.contextPath}/showAllOrder" class="btn btn-outline">
                                <i class="fas fa-arrow-left"></i> 返回订单列表
                            </a>
                        </c:when>
                        <%-- 默认返回上一页 --%>
                        <c:otherwise>
                            <a href="javascript:history.back();" class="btn btn-outline">
                                <i class="fas fa-arrow-left"></i> 返回列表
                            </a>
                        </c:otherwise>
                    </c:choose>
                </div>

                <div class="order-detail">
                    <div class="detail-section">
                        <h3>订单信息</h3>
                        <c:if test="${(order.status == 0 || order.status == 1) && order.buyerId == user.userId}"> <%-- 只有待付款订单可以修改 --%>
                            <a href="${pageContext.request.contextPath}/orderEdit?action=editProduct&orderId=${order.orderId}"
                               class="btn btn-outline btn-edit">
                                <i class="fas fa-edit"></i>&nbsp;&nbsp;修改订单
                            </a>
                        </c:if>
                        <div class="detail-row">
                            <div class="detail-label">订单编号：</div>
                            <div class="detail-value">${order.orderNumber}</div>
                        </div>
                        <div class="detail-row">
                            <div class="detail-label">订单状态：</div>
                            <div class="detail-value">
                                <span class="detail-status-order">
                                    <c:choose>
                                        <c:when test="${order.status == 0}">待付款</c:when>
                                        <c:when test="${order.status == 1}">已付款</c:when>
                                        <c:when test="${order.status == 2}">交易完成</c:when>
                                        <c:when test="${order.status == 3}">已取消</c:when>
                                        <c:when test="${order.status == 4}">已退款</c:when>
                                    </c:choose>
                                </span>
                            </div>
                        </div>
                        <div class="detail-row">
                            <div class="detail-label">下单时间：</div>
                            <div class="detail-value"><fmt:formatDate value="${order.createTime}"
                                                                      pattern="yyyy-MM-dd HH:mm:ss"/></div>
                        </div>
                        <c:if test="${order.status ne 0}">
                            <div class="detail-row">
                                <div class="detail-label">付款时间：</div>
                                <c:if test="${order.status eq 0 || order.status eq 3}">
                                    <div class="detail-value">未付款</div>
                                </c:if>
                                <div class="detail-value"><fmt:formatDate value="${order.paymentTime}"
                                                                          pattern="yyyy-MM-dd HH:mm:ss"/></div>
                            </div>
                        </c:if>
                        <div class="detail-row">
                            <div class="detail-label">订单备注：</div>
                            <div class="detail-value">${empty order.hintInfo ? '无' : order.hintInfo}</div>
                        </div>
                    </div>

                    <div class="detail-section">
                        <h3>收货信息</h3>
                        <div class="address-box">
                            <p><strong>${userUtils.getRealName(order.buyerId)}</strong></p>
                            <p>${order.buyerPhone}</p>
                            <p>${order.address}</p>
                        </div>
                    </div>

                    <div class="detail-section">
                        <h3>商品信息</h3>
                        <div class="detail-product-card">
                            <div class="detail-product-item">
                                <div class="detail-product-image">
                                    <c:set var="productImage" value="${productUtils.getProductImage(order.productId)}"/>
                                    <img src="${pageContext.request.contextPath}/productPictures/${order.productId}/${productImage}"
                                         onerror="this.src='${pageContext.request.contextPath}/default-product.webp'">
                                </div>
                                <div class="detail-product-info">
                                    <c:set var="productName" value="${productUtils.getProductTitle(order.productId)}"/>
                                    <div class="detail-product-title">${productName}</div>
                                    <div class="detail-product-meta">卖家：${userUtils.getRealName(order.sellerId)}</div>
                                    <div class="detail-product-meta">联系电话：${order.sellerPhone}</div>
                                    <div class="detail-product-meta">
                                        商品成色：${productUtils.getProductConditionLevel(order.productId)}</div>
                                    <div class="detail-product-price">¥<fmt:formatNumber value="${order.price}"
                                                                                         pattern="0.00"/></div>
                                </div>
                            </div>
                        </div>
                        <div class="order-footer">
                            <div class="order-total">
                                实付款：<span>¥<fmt:formatNumber value="${order.price}" pattern="0.00"/></span>
                            </div>
                            <div class="order-actions">
                                <c:choose>
                                    <c:when test="${order.status == 0}">待付款</c:when>
                                    <c:when test="${order.status == 1}">已付款</c:when>
                                    <c:when test="${order.status == 2}">交易完成</c:when>
                                    <c:when test="${order.status == 3}">已取消</c:when>
                                    <c:when test="${order.status == 4}">已退款</c:when>
                                </c:choose>
                            </div>
                        </div>
                    </div>
                </div>
            </c:when>

            <c:when test="${param.action == 'cart' || action == 'cart'}">
                <div class="content-header">
                    <h2>我的购物车</h2>
                    <div class="sort-options">
                        <label for="sort-select" class="sort-label">排序:</label>
                        <select id="sortSelect" class="sort-select" onchange="location = this.value">
                            <option value="?searchKeyword=${searchKeyword}&sort=time_desc&page=${currentPage}"
                                ${sort == 'time_desc' ? 'selected' : ''}>
                                最新 ↓
                            </option>
                            <option value="?searchKeyword=${searchKeyword}&sort=time_asc&page=${currentPage}"
                                ${sort == 'time_asc' ? 'selected' : ''}>
                                最早 ↑
                            </option>
                        </select>
                    </div>
                    <div class="order-date">共 ${orderItemQuantity} 件商品</div>
                </div>

                <c:choose>
                    <c:when test="${empty carItemList}">
                        <div class="empty-cart">
                            <div class="empty-cart-icon">
                                <i class="fas fa-shopping-cart"></i>
                            </div>
                            <h3 class="empty-cart-text">购物车空空如也</h3>
                            <a href="${pageContext.request.contextPath}/showAllProducts" class="btn btn-primary">去逛逛</a>
                        </div>
                    </c:when>
                    <c:otherwise>
                        <form id="cartForm" action="${pageContext.request.contextPath}/carItemPay" method="post">
                            <c:forEach items="${carItemList}" var="cartItem">
                                <div class="order-card">
                                    <div class="order-header">
                                        <input type="hidden" name="carItemBuyerId" value="${cartItem.userId}">
                                        <input type="hidden" name="carItemSellerId" value="${cartItem.sellerId}">
                                        <input type="hidden" name="carItemProductId" value="${cartItem.productId}">
                                        <input type="hidden" name="carItemId" value="${cartItem.id}">
                                        <div class="order-id">${productUtils.getProductTitle(cartItem.productId)}</div>
                                    </div>

                                    <div class="order-body">
                                        <div class="order-item">
                                            <div class="item-image">
                                                <img src="${pageContext.request.contextPath}/productPictures/${cartItem.productId}/${productUtils.getProductImage(cartItem.productId)}"
                                                     onerror="this.src='${pageContext.request.contextPath}/default-product.webp'">
                                            </div>
                                            <div class="item-details">
                                                <div class="item-description"
                                                     style="font-size: 16px;">${productUtils.getDescription(cartItem.productId)}</div>
                                                <div class="item-seller">
                                                    卖家：${userUtils.getRealName(cartItem.sellerId)}</div>
                                                <div class="item-sellerPhone">
                                                    联系电话：${productUtils.getProductSellerPhone(cartItem.productId)}</div>
                                                <div class="item-conditionLevel">
                                                    商品成色：${productUtils.getProductConditionLevel(cartItem.productId)}</div>
                                                <div class="item-price">¥<fmt:formatNumber
                                                        value="${productUtils.getProductPrice(cartItem.productId)}"
                                                        pattern="0.00"/></div>
                                            </div>
                                        </div>
                                        <div class="order-footer">
                                            <button type="button" class="btn btn-outline"
                                                    onclick="if(confirm('您确认要将本商品从购物车删除吗？')) {
                                                            window.location.href='${pageContext.request.contextPath}/carItemDelete?productId=${cartItem.productId}'
                                                            }">
                                                <i class="fas fa-trash-alt"></i> 删除
                                            </button>
                                            <button class="btn btn-primary" type="submit">立即购买</button>
                                        </div>
                                    </div>
                                </div>
                            </c:forEach>
                        </form>

                        <!-- 页码 -->
                        <div class="pagination" style="margin:10px auto;padding-top: 10px; text-align: center;">
                            <c:if test="${totalPages == 1}">
                        <span class="current-page"
                              style="padding: 8px 12px; margin: 0 5px; background: #2c3e50; color: white; border-radius: 4px;">
                            1
                        </span>
                            </c:if>
                            <c:if test="${totalPages > 1}">
                                <!-- 首页和上一页 -->
                                <c:if test="${currentPage > 1}">
                                    <a href="${pageContext.request.contextPath}/orderCar?searchKeyword=${searchKeyword}&action=cart&sort=${sort}&page=1"
                                       class="page-link"
                                       style="padding: 8px 12px; margin: 0 5px; background: #e74c3c; color: white; border-radius: 4px; text-decoration: none;">
                                        首页
                                    </a>
                                    <a href="${pageContext.request.contextPath}/orderCar?searchKeyword=${searchKeyword}&action=cart&sort=${sort}&page=${currentPage - 1}"
                                       class="page-link"
                                       style="padding: 8px 12px; margin: 0 5px; background: #e74c3c; color: white; border-radius: 4px; text-decoration: none;">
                                        上一页
                                    </a>
                                </c:if>

                                <!-- 页码显示逻辑 -->
                                <c:choose>
                                    <c:when test="${totalPages <= 3}">
                                        <!-- 总页数≤3时显示所有页码 -->
                                        <c:forEach begin="1" end="${totalPages}" var="i">
                                            <c:choose>
                                                <c:when test="${i == currentPage}">
                            <span class="current-page"
                                  style="padding: 8px 12px; margin: 0 5px; background: #2c3e50; color: white; border-radius: 4px;">
                                    ${i}
                            </span>
                                                </c:when>
                                                <c:otherwise>
                                                    <a href="${pageContext.request.contextPath}/orderCar?searchKeyword=${searchKeyword}&action=cart&sort=${sort}&page=${i}"
                                                       class="page-link"
                                                       style="padding: 8px 12px; margin: 0 5px; background: #e74c3c; color: white; border-radius: 4px; text-decoration: none;">
                                                            ${i}
                                                    </a>
                                                </c:otherwise>
                                            </c:choose>
                                        </c:forEach>
                                    </c:when>
                                    <c:otherwise>
                                        <!-- 总页数>5时的智能分页显示 -->
                                        <c:set var="startPage" value="${currentPage - 1}"/>
                                        <c:set var="endPage" value="${currentPage + 1}"/>
                                        <!-- 调整起始页 -->
                                        <c:if test="${startPage < 1}">
                                            <c:set var="startPage" value="1"/>
                                            <c:set var="endPage" value="3"/>
                                        </c:if>
                                        <!-- 调整结束页 -->
                                        <c:if test="${endPage > totalPages}">
                                            <c:set var="endPage" value="${totalPages}"/>
                                            <c:set var="startPage" value="${totalPages - 2}"/>
                                        </c:if>
                                        <!-- 显示当前页附近的3个页码 -->
                                        <c:forEach begin="${startPage}" end="${endPage}" var="i">
                                            <c:choose>
                                                <c:when test="${i == currentPage}">
                                                    <!--高亮显示-->
                                                    <span class="current-page"
                                                          style="padding: 8px 12px; margin: 0 5px; background: #2c3e50; color: white; border-radius: 4px;">
                                                            ${i}
                                                    </span>
                                                </c:when>
                                                <c:otherwise>
                                                    <a href="${pageContext.request.contextPath}/orderCar?searchKeyword=${searchKeyword}&action=cart&sort=${sort}&page=${i}"
                                                       class="page-link"
                                                       style="padding: 8px 12px; margin: 0 5px; background: #e74c3c; color: white; border-radius: 4px; text-decoration: none;">
                                                            ${i}
                                                    </a>
                                                </c:otherwise>
                                            </c:choose>
                                        </c:forEach>
                                    </c:otherwise>
                                </c:choose>
                                <!-- 下一页和尾页 -->
                                <c:if test="${currentPage < totalPages}">
                                    <a href="${pageContext.request.contextPath}/orderCar?searchKeyword=${searchKeyword}&action=cart&sort=${sort}&page=${currentPage + 1}"
                                       class="page-link"
                                       style="padding: 8px 12px; margin: 0 5px; background: #e74c3c; color: white; border-radius: 4px; text-decoration: none;">
                                        下一页
                                    </a>
                                    <a href="${pageContext.request.contextPath}/orderCar?searchKeyword=${searchKeyword}&action=cart&sort=${sort}&page=${totalPages}"
                                       class="page-link"
                                       style="padding: 8px 12px; margin: 0 5px; background: #e74c3c; color: white; border-radius: 4px; text-decoration: none;">
                                        尾页
                                    </a>
                                </c:if>
                            </c:if>
                        </div>
                    </c:otherwise>
                </c:choose>
            </c:when>

            <c:otherwise>
                <div class="content-header">
                    <h2>我的订单</h2>
                    <div class="sort-options">
                        <label for="sort-select" class="sort-label">排序:</label>
                        <select id="sort-select" class="sort-select" onchange="location = this.value">
                            <option value="?searchKeyword=${searchKeyword}&sort=time_desc&page=${currentPage}"
                                ${sort == 'time_desc' ? 'selected' : ''}>
                                最新 ↓
                            </option>
                            <option value="?searchKeyword=${searchKeyword}&sort=time_asc&page=${currentPage}"
                                ${sort == 'time_asc' ? 'selected' : ''}>
                                最早 ↑
                            </option>
                            <option value="?searchKeyword=${searchKeyword}&sort=price_asc&page=${currentPage}"
                                ${sort == 'price_asc' ? 'selected' : ''}>
                                价格 ↑
                            </option>
                            <option value="?searchKeyword=${searchKeyword}&sort=price_desc&page=${currentPage}"
                                ${sort == 'price_desc' ? 'selected' : ''}>
                                价格 ↓
                            </option>
                        </select>
                    </div>
                    <div class="order-date">共 ${orderQuantity} 笔订单</div>
                </div>

                <c:choose>
                    <c:when test="${empty orderList}">
                        <div class="empty-state">
                            <div class="empty-icon"><i class="fas fa-file-alt"></i></div>
                            <h3 class="empty-text">暂无订单记录</h3>
                            <a href="${pageContext.request.contextPath}/showAllProducts" class="btn btn-primary">去逛逛</a>
                        </div>
                    </c:when>
                    <c:otherwise>
                        <c:forEach items="${orderList}" var="order" end="1">
                            <div class="order-card">
                                <div class="order-header">
                                    <div class="order-id">订单编号：${order.orderNumber}</div>
                                    <c:if test="${order.status eq 0}">
                                        <div class="countdown" data-order-id="${order.orderId}"
                                             data-create-time="<fmt:formatDate value="${order.createTime}" pattern="yyyy-MM-dd HH:mm:ss" />">
                                            剩余支付时间: <span class="time-remaining"></span>
                                        </div>
                                    </c:if>
                                    <div class="order-status status-${order.status}">
                                        <c:choose>
                                            <c:when test="${order.status == 0}">待付款</c:when>
                                            <c:when test="${order.status == 1}">已付款</c:when>
                                            <c:when test="${order.status == 2}">交易完成</c:when>
                                            <c:when test="${order.status == 3}">已取消</c:when>
                                            <c:when test="${order.status == 4}">已退款</c:when>
                                        </c:choose>
                                    </div>
                                </div>

                                <!-- 三点菜单按钮 -->
                                <c:if test="${order.status eq 2 || order.status eq 3 || order.status eq 4}">
                                    <div class="order-actions-menu">
                                        <button class="menu-dots">⋮</button>
                                        <div class="menu-content">
                                            <a href="${pageContext.request.contextPath}/orderDelete?orderId=${order.orderId}"
                                               onclick="return confirm('确定要删除此订单吗？')">删除订单</a>
                                        </div>
                                    </div>
                                </c:if>

                                <div class="order-body">
                                    <div class="order-item">
                                        <div class="item-image">
                                            <c:set var="productImage"
                                                   value="${productUtils.getProductImage(order.productId)}"/>
                                            <img src="${pageContext.request.contextPath}/productPictures/${order.productId}/${productImage}"
                                                 onerror="this.src='${pageContext.request.contextPath}/default-product.webp'">
                                        </div>
                                        <div class="item-details">
                                            <c:set var="productName"
                                                   value="${productUtils.getProductTitle(order.productId)}"/>
                                            <div class="item-title">${productName}</div>
                                            <div class="item-seller">卖家：${userUtils.getRealName(order.sellerId)}</div>
                                            <div class="item-seller">联系电话：${order.sellerPhone}</div>
                                            <div class="item-seller">下单时间：<fmt:formatDate value="${order.createTime}"
                                                                                          pattern="yyyy-MM-dd HH:mm:ss"/></div>
                                            <c:if test="${order.status eq 1 || order.status eq 2 || order.status eq 4}">
                                                <div class="item-seller">付款时间：<fmt:formatDate
                                                        value="${order.paymentTime}"
                                                        pattern="yyyy-MM-dd HH:mm:ss"/></div>
                                            </c:if>
                                            <div class="item-price">¥<fmt:formatNumber value="${order.price}"
                                                                                       pattern="0.00"/></div>
                                        </div>
                                    </div>
                                    <div class="order-footer">
                                        <div class="order-total">
                                            实付款：<span>¥<fmt:formatNumber value="${order.price}" pattern="0.00"/></span>
                                        </div>
                                        <div class="order-actions">
                                            <c:if test="${order.status eq 0}">
                                                <button class="status-cancelled"
                                                        onclick="if(confirm('您确认要取消订单吗？')) {
                                                                window.location.href='${pageContext.request.contextPath}/orderCancel?orderId=${order.orderId}'
                                                                }">
                                                    取消订单
                                                </button>
                                            </c:if>
                                            <c:if test="${order.status eq 1}">
                                                <button class="status-cancelled"
                                                        onclick="if(confirm('您确认要退款吗？')) {
                                                                window.location.href='${pageContext.request.contextPath}/orderRefund?orderId=${order.orderId}'
                                                                }">
                                                    申请退款
                                                </button>
                                            </c:if>
                                            <a href="${pageContext.request.contextPath}/showAllOrder?action=detail&orderId=${order.orderId}"
                                               class="btn btn-outline">订单详情</a>
                                            <c:if test="${order.status == 0}">
                                                <button class="btn btn-primary"
                                                        onclick="payOrder('${order.orderId}', '${productName}', ${order.price})">
                                                    立即支付
                                                </button>
                                            </c:if>
                                            <c:if test="${order.status == 1}">
                                                <button class="btn btn-primary" onclick="if(confirm('您确定收货了且没问题吗？')) {
                                                        window.location.href='${pageContext.request.contextPath}/orderEnter?orderId=${order.orderId}'
                                                        }">
                                                    确认收货
                                                </button>
                                            </c:if>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </c:forEach>

                        <div class="pagination" style="margin:10px auto;padding-top: 10px; text-align: center;">
                            <c:if test="${totalPages == 1}">
                        <span class="current-page"
                              style="padding: 8px 12px; margin: 0 5px; background: #2c3e50; color: white; border-radius: 4px;">
                            1
                        </span>
                            </c:if>
                            <c:if test="${totalPages > 1}">
                                <!-- 首页和上一页 -->
                                <c:if test="${currentPage > 1}">
                                    <a href="?searchKeyword=${searchKeyword}&sort=${sort}&page=1" class="page-link"
                                       style="padding: 8px 12px; margin: 0 5px; background: #e74c3c; color: white; border-radius: 4px; text-decoration: none;">
                                        首页
                                    </a>
                                    <a href="?searchKeyword=${searchKeyword}&sort=${sort}&page=${currentPage - 1}"
                                       class="page-link"
                                       style="padding: 8px 12px; margin: 0 5px; background: #e74c3c; color: white; border-radius: 4px; text-decoration: none;">
                                        上一页
                                    </a>
                                </c:if>

                                <!-- 页码显示逻辑 -->
                                <c:choose>
                                    <c:when test="${totalPages <= 3}">
                                        <!-- 总页数≤3时显示所有页码 -->
                                        <c:forEach begin="1" end="${totalPages}" var="i">
                                            <c:choose>
                                                <c:when test="${i == currentPage}">
                            <span class="current-page"
                                  style="padding: 8px 12px; margin: 0 5px; background: #2c3e50; color: white; border-radius: 4px;">
                                    ${i}
                            </span>
                                                </c:when>
                                                <c:otherwise>
                                                    <a href="?sort=${sort}&page=${i}" class="page-link"
                                                       style="padding: 8px 12px; margin: 0 5px; background: #e74c3c; color: white; border-radius: 4px; text-decoration: none;">
                                                            ${i}
                                                    </a>
                                                </c:otherwise>
                                            </c:choose>
                                        </c:forEach>
                                    </c:when>
                                    <c:otherwise>
                                        <!-- 总页数>5时的智能分页显示 -->
                                        <c:set var="startPage" value="${currentPage - 1}"/>
                                        <c:set var="endPage" value="${currentPage + 1}"/>
                                        <!-- 调整起始页 -->
                                        <c:if test="${startPage < 1}">
                                            <c:set var="startPage" value="1"/>
                                            <c:set var="endPage" value="3"/>
                                        </c:if>
                                        <!-- 调整结束页 -->
                                        <c:if test="${endPage > totalPages}">
                                            <c:set var="endPage" value="${totalPages}"/>
                                            <c:set var="startPage" value="${totalPages - 2}"/>
                                        </c:if>
                                        <!-- 显示当前页附近的3个页码 -->
                                        <c:forEach begin="${startPage}" end="${endPage}" var="i">
                                            <c:choose>
                                                <c:when test="${i == currentPage}">
                                                    <!--高亮显示-->
                                                    <span class="current-page"
                                                          style="padding: 8px 12px; margin: 0 5px; background: #2c3e50; color: white; border-radius: 4px;">
                                                            ${i}
                                                    </span>
                                                </c:when>
                                                <c:otherwise>
                                                    <a href="?searchKeyword=${searchKeyword}&sort=${sort}&page=${i}"
                                                       class="page-link"
                                                       style="padding: 8px 12px; margin: 0 5px; background: #e74c3c; color: white; border-radius: 4px; text-decoration: none;">
                                                            ${i}
                                                    </a>
                                                </c:otherwise>
                                            </c:choose>
                                        </c:forEach>
                                    </c:otherwise>
                                </c:choose>
                                <!-- 下一页和尾页 -->
                                <c:if test="${currentPage < totalPages}">
                                    <a href="?searchKeyword=${searchKeyword}&sort=${sort}&page=${currentPage + 1}"
                                       class="page-link"
                                       style="padding: 8px 12px; margin: 0 5px; background: #e74c3c; color: white; border-radius: 4px; text-decoration: none;">
                                        下一页
                                    </a>
                                    <a href="?searchKeyword=${searchKeyword}&sort=${sort}&page=${totalPages}"
                                       class="page-link"
                                       style="padding: 8px 12px; margin: 0 5px; background: #e74c3c; color: white; border-radius: 4px; text-decoration: none;">
                                        尾页
                                    </a>
                                </c:if>
                            </c:if>
                        </div>

                    </c:otherwise>
                </c:choose>
            </c:otherwise>
        </c:choose>
    </div>
</main>


<!--支付模态框-->
<div id="paymentModal" class="modal">
    <div class="modal-content">
        <span class="close-modal" onclick="closeModal()">&times;</span>
        <!--商品信息 -->
        <div id="productName"
             style="font-weight: bolder; font-size: 30px;margin-top:20px;margin-bottom:10px;text-align: center;"></div>
        <!-- 支付方式选择选项卡 -->
        <h3>请选择支付方式</h3>
        <div class="payment-tabs">
            <button class="tab-btn active" onclick="openPaymentTab('wechat')">微信支付</button>
            <button class="tab-btn" onclick="openPaymentTab('alipay')">支付宝</button>
        </div>
        <!-- 微信支付内容 -->
        <div id="wechatTab" class="payment-tab-content">
            <div class="payment-instructions">
                请使用微信扫描下方二维码完成支付<br>
                支付完成后订单将自动更新
            </div>
            <div class="qr-code">
                <img src="${pageContext.request.contextPath}/wechat.jpg" alt="微信收款二维码">
            </div>
        </div>
        <!-- 支付宝支付内容 -->
        <div id="alipayTab" class="payment-tab-content">
            <div class="payment-instructions">
                请使用支付宝扫描下方二维码完成支付<br>
                支付完成后订单将自动更新
            </div>
            <div class="qr-code">
                <img src="${pageContext.request.contextPath}/zfb.jpg" alt="支付宝收款二维码">
            </div>
        </div>
        <div id="productPrice"
             style="color: #e74c3c; font-size: 30px; font-weight: bold; text-align: center;margin-bottom:20px;"></div>
        <div class="payment-success" id="paymentSuccess">
            <i class="fas fa-check-circle"></i> 支付成功！
        </div>
        <button class="btn btn-primary" onclick="simulatePaymentSuccess()">模拟支付完成</button>
    </div>
</div>

<!-- 页脚 -->
<footer class="footer">
    <div class="container">
        <div class="footer-content">
            <div class="footer-section">
                <h3>关于我们</h3>
                <p>校园二手市场致力于为同学们提供安全、便捷的二手交易平台，促进资源循环利用。</p>
            </div>
            <div class="footer-section">
                <h3>快速链接</h3>
                <ul>
                    <li><a href="${pageContext.request.contextPath}/home">首页</a></li>
                    <li><a href="${pageContext.request.contextPath}/productUpload">发布商品</a></li>
                    <li><a href="${pageContext.request.contextPath}/showAllOrder">我的订单</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>联系我们</h3>
                <p><i class="fas fa-envelope"></i> 2424717883@qq.com</p>
                <p><i class="fas fa-phone"></i> 17868292884</p>
            </div>
        </div>
        <div class="copyright">
            <p>&copy; 2025 CB 校园二手市场 版权所有</p>
        </div>
    </div>
</footer>

<script>
    //检测是否有从购物车购买的订单，根据id判断并打开支付框
    document.addEventListener('DOMContentLoaded', function () {
        // 检查session中是否有待支付的订单
        const pendingPaymentOrderId = '${sessionScope.pendingPaymentOrderId}';
        const pendingPaymentProductName = '${sessionScope.pendingPaymentProductName}';
        const pendingPaymentPrice = '${sessionScope.pendingPaymentPrice}';

        if (pendingPaymentOrderId && pendingPaymentOrderId !== '') {
            // 显示支付模态框
            payOrder(pendingPaymentOrderId, pendingPaymentProductName, pendingPaymentPrice);

            // 清除session中的标记，避免重复显示
            fetch('${pageContext.request.contextPath}/clearPendingPayment', {
                method: 'POST'
            });
        }

        // 页面加载时同步所有订单状态
        syncAllOrderStatus();
    });

    // 支付订单 - 打开模态框
    function payOrder(orderId, productName, productPrice) {
        // 存储当前订单ID
        document.getElementById('paymentModal').dataset.orderId = orderId;

        // 更新商品信息
        document.getElementById('productName').textContent = productName;
        document.getElementById('productPrice').textContent = '￥' + productPrice;

        // 显示模态框
        document.getElementById('paymentModal').style.display = 'block';
        document.getElementById('productName').style.display = 'block';
        document.getElementById('productPrice').style.display = 'block';
        document.getElementById('paymentSuccess').style.display = 'none';
        document.querySelector('button[onclick="simulatePaymentSuccess()"]').style.display = 'block';

        // 重置支付选项卡
        document.querySelectorAll('.payment-tab-content').forEach(content => {
            content.style.display = 'none';
        });
        document.getElementById('wechatTab').style.display = 'block';

        // 重置选项卡按钮状态
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.classList.remove('active');
        });
        document.querySelector('.tab-btn').classList.add('active');
    }

    // 模拟支付成功
    function simulatePaymentSuccess() {
        const orderId = document.getElementById('paymentModal').dataset.orderId;
        const successMsg = document.getElementById('paymentSuccess');
        const paymentButton = document.querySelector('button[onclick="simulatePaymentSuccess()"]');

        // 隐藏按钮（防止重复点击）
        paymentButton.style.display = 'none';

        // 显示成功消息
        successMsg.style.display = 'block';

        // 1.5秒后自动关闭模态框并刷新页面
        setTimeout(() => {
            document.getElementById('paymentModal').style.display = 'none';
            // 实际支付处理
            fetch('${pageContext.request.contextPath}/orderPay', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'orderId=' + orderId
            }).then(response => {
                if (response.ok) {
                    location.reload();
                }
            });
        }, 1500);
    }

    // 切换支付选项卡
    function openPaymentTab(paymentMethod) {
        // 隐藏所有选项卡内容
        document.querySelectorAll('.payment-tab-content').forEach(content => {
            content.style.display = 'none';
        });

        // 显示选中的选项卡内容
        document.getElementById(paymentMethod + 'Tab').style.display = 'block';

        // 更新选项卡按钮状态
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.classList.remove('active');
        });
        event.currentTarget.classList.add('active');
    }

    // 关闭模态框
    function closeModal() {
        document.getElementById('paymentModal').style.display = 'none';
    }

    // 订单倒计时与状态同步功能
    function updateCountdowns() {
        const now = new Date();
        const countdownElements = document.querySelectorAll('.countdown');

        countdownElements.forEach(element => {
            // 确保元素仍在DOM中
            if (!document.body.contains(element)) return;

            const createTimeStr = element.dataset.createTime;
            const orderId = element.dataset.orderId;

            // 修正时间格式解析
            const createTime = new Date(createTimeStr.replace(/-/g, '/'));
            const expirationTime = new Date(createTime.getTime() + 30 * 60 * 1000); // 30分钟后

            // 计算剩余时间（毫秒）
            const remainingMs = expirationTime - now;

            if (remainingMs > 0) {
                // 更新倒计时显示
                const minutes = Math.floor(remainingMs / (60 * 1000));
                const seconds = Math.floor((remainingMs % (60 * 1000)) / 1000);
                const timeRemainingElement = element.querySelector('.time-remaining');
                timeRemainingElement.textContent =
                    minutes.toString().padStart(2, '0') + ":" + seconds.toString().padStart(2, '0');
            } else {
                // 倒计时结束后，显示“已过期”
                element.querySelector('.time-remaining').textContent = "已过期";
            }

            // 轮询后端订单状态
            fetch('${pageContext.request.contextPath}/order/status', {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: `orderId=${orderId}`
            })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 3) { // 后端标记为“已取消”
                        // 更新订单状态显示
                        const orderCard = element.closest('.order-card');
                        if (orderCard) {
                            const statusElement = orderCard.querySelector('.order-status');
                            if (statusElement) {
                                statusElement.textContent = "已取消";
                                statusElement.classList.add('status-cancelled');
                            }
                            // 隐藏倒计时
                            element.style.display = 'none';
                        }
                    }
                })
                .catch(error => console.error('轮询订单状态失败:', error));
        });
    }

    // 批量同步所有订单状态
    function syncAllOrderStatus() {
        const orderIds = [];
        document.querySelectorAll('.countdown').forEach(el => {
            orderIds.push(el.dataset.orderId);
        });

        if (orderIds.length > 0) {
            fetch('${pageContext.request.contextPath}/orders/status/batch', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ orderIds: orderIds })
            })
                .then(response => response.json())
                .then(data => {
                    data.forEach(orderStatus => {
                        const orderId = orderStatus.orderId;
                        const status = orderStatus.status;
                        const element = document.querySelector(`.countdown[data-order-id="${orderId}"]`);
                        if (element) {
                            const orderCard = element.closest('.order-card');
                            if (orderCard) {
                                const statusElement = orderCard.querySelector('.order-status');
                                if (statusElement) {
                                    // 更新状态文本
                                    switch(status) {
                                        case 0: statusText = "待付款"; break;
                                        case 1: statusText = "已付款"; break;
                                        case 2: statusText = "交易完成"; break;
                                        case 3: statusText = "已取消"; break;
                                        case 4: statusText = "已退款"; break;
                                        default: statusText = "未知状态";
                                    }
                                    statusElement.textContent = statusText;
                                    statusElement.classList.toggle('status-cancelled', status === 3);
                                }
                                // 如果已取消，隐藏倒计时
                                if (status === 3) {
                                    element.style.display = 'none';
                                }
                            }
                        }
                    });
                })
                .catch(error => console.error('批量查询订单状态失败:', error));
        }
    }

    // 初始化倒计时和状态同步
    document.addEventListener('DOMContentLoaded', function () {
        // 初始更新倒计时
        updateCountdowns();

        // 每秒更新一次倒计时显示
        setInterval(updateCountdowns, 1000);

        // 每分钟额外同步一次所有订单状态（作为双重保障）
        setInterval(syncAllOrderStatus, 60000);
    });

    //切换高亮显示
    document.addEventListener('DOMContentLoaded', function () {
        const currentPath = window.location.pathname;
        const urlParams = new URLSearchParams(window.location.search);
        const action = urlParams.get('action');

        // 清除所有菜单项的active类
        const links = document.querySelectorAll('.sidebar-menu a');
        links.forEach(link => link.classList.remove('active'));

        // 根据路径或参数添加active类
        if (action === 'cart' || currentPath.endsWith('/orderCar')) {
            document.querySelector('a[href$="/orderCar"]').classList.add('active');
        } else if (currentPath.endsWith('/showAllOrder')) {
            document.querySelector('a[href$="/showAllOrder"]').classList.add('active');
        } else if (currentPath.endsWith('/wishlist')) {
            document.querySelector('a[href$="/wishlist"]').classList.add('active');
        } else if (currentPath.endsWith('/userCenter')) {
            document.querySelector('a[href$="/userCenter"]').classList.add('active');
        } else if (currentPath.endsWith('/home')) {
            document.querySelector('a[href$="/userCenter"]').classList.add('active');
        }
    });
</script>
</body>
</html>
